
<!-- PAGE TOP -->
<section class="page-title">
    <div class="container">

        <header>

            <ul class="breadcrumb"><!-- breadcrumb -->
                <li><a href="#">Pages</a></li>
                <li class="active">Account Settings Page</li>
            </ul><!-- /breadcrumb -->

            <h2><!-- Page Title -->
                <strong>Account</strong> Settings
            </h2><!-- /Page Title -->

        </header>

    </div>
</section>
<!-- /PAGE TOP -->



<!-- CONTENT -->
<section>
    <div class="container">

        <div class="row">

            <div class="col-md-8">

                <!-- personal settings -->
                <form action="#" method="post" class="sky-form boxed">
                    <header>Personal Settings</header>

                    <fieldset>
                        <div class="row">
                            <section class="col col-md-6">
                                <label class="label">First Name</label>
                                <label class="input">
                                    <i class="icon-append fa fa-user"></i>
                                    <input required="" type="text" />
                                    <b class="tooltip tooltip-bottom-right">Only latin characters and numbers</b>
                                </label>
                            </section>
                            <section class="col col-md-6">
                                <label class="label">Last Name</label>
                                <label class="input">
                                    <i class="icon-append fa fa-user"></i>
                                    <input required="" type="text" />
                                    <b class="tooltip tooltip-bottom-right">Only latin characters and numbers</b>
                                </label>
                            </section>
                        </div>

                        <div class="row">
                            <section class="col col-md-6">
                                <label class="label">Email</label>
                                <label class="input">
                                    <i class="icon-append fa fa-envelope"></i>
                                    <input required="" type="text" />
                                    <b class="tooltip tooltip-bottom-right">Valid email address</b>
                                </label>
                            </section>
                            <section class="col col-md-6">
                                <label class="label">Phone</label>
                                <label class="input">
                                    <i class="icon-append fa fa-phone"></i>
                                    <input type="text" />
                                    <b class="tooltip tooltip-bottom-right">Valid phone number</b>
                                </label>
                            </section>
                        </div>

                        <label class="label">Address</label>
                        <label class="textarea">
                            <i class="icon-append fa fa-pencil-square-o"></i>
                            <textarea rows="3"></textarea>
                            <b class="tooltip tooltip-bottom-right">Only latin characters and numbers</b>
                        </label>

                        <div class="form-group">
                            <div class="col-md-6 nopadding">
                                <label class="checkbox"><input name="checkbox" checked="" type="checkbox" /><i></i>Monthly Newsletter</label>
                            </div>

                            <div class="col-md-6 nopadding">
                                <div class="row">
                                    <div class="col-md-4 col-sm-4 col-xs-4">
                                        <label class="radio"><input name="radio-inline" checked="" type="radio" /><i></i>Male</label>
                                    </div>
                                    <div class="col-md-8 col-sm-8 col-xs-8">
                                        <label class="radio"><input name="radio-inline" type="radio" /><i></i>Female</label>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </fieldset>

                    <footer>
                        <button type="submit" class="button"><i class="fa fa-check"></i> Save Changes</button>
                    </footer>

                </form>
                <!-- /personal settings -->
            </div>

            <div class="col-md-4">


                <!-- password -->
                <form action="#" method="post" class="sky-form boxed">
                    <header>Change Password</header>

                    <fieldset>

                        <section>
                            <label class="label">Current Password</label>
                            <label class="input">
                                <i class="icon-append fa fa-lock"></i>
                                <input required="" type="password" />
                                <b class="tooltip tooltip-bottom-right">Your current password</b>
                            </label>
                        </section>

                        <section>
                            <label class="label">New Password</label>
                            <label class="input">
                                <i class="icon-append fa fa-lock"></i>
                                <input required="" type="password" />
                                <b class="tooltip tooltip-bottom-right">Type a new password (min.3 chr.)</b>
                            </label>
                        </section>

                        <section>
                            <label class="label">Confirm New Password</label>
                            <label class="input">
                                <i class="icon-append fa fa-lock"></i>
                                <input required="" type="password" />
                                <b class="tooltip tooltip-bottom-right">Type the new password again</b>
                            </label>
                        </section>
                    </fieldset>

                    <footer>
                        <button type="submit" class="button"><i class="fa fa-check"></i> Change Password</button>
                    </footer>
                </form>
                <!-- /password -->

            </div>

        </div>

    </div>
</section>
<!-- /CONTENT -->


